<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>MVVM</title>
</head>
<body>
    <!-- 
        由Vue所调用的函数都不要写成箭头函数
     -->
    <div id="root">
        <h1>{{msg}}</h1>
        <h1>{{address}}</h1>
    </div>
    <script>
        //el第一种写法（常用）
        /* new Vue({
            el:"#root",
            data:{
                msg:'iwat',
                address:'xiahetuan'
            }
        }); */

        //el的第二种写法（不常用）
        /* const vm = new Vue({
            data:{
                msg:'iwat',
                address:'xiahetuan'
            }
        });
        console.log(vm);
        vm.$mount('#root');
        console.log(vm); */

        //data的第一种写法,对象
        /*new Vue({
            el:"#root",
            data:{
                msg:'iwat',
                address:'xiahetuan'
            }
        }); */

        //data的第二种写法，函数，组件中用的多，vue会棒我们调用该函数，并将数据绑定到vue实例对象
        new Vue({
            el:"#root",
            data:function(){//特别注意，data不要使用箭头函数，否则this的指向就是window了
                return{
                    msg:'iwat',
                    address:'xiahetuan'
                }
            }
        });
    </script>
</body>
</html>